<template>
  <div>
    <div class="main-body">
      <div class="p-1">
        <el-button type="primary" @click="addAgency">新增</el-button>
      </div>
      <el-table :data="data" border>
        <el-table-column label="编号" prop="templateName" width="100" />
        <el-table-column label="文字大小" prop="fontSize" width="90" />
        <el-table-column label="内容" prop="text" width="1000" align="center" />
        <el-table-column label="时间" prop="createTime" width="180" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" @click="bianji(scope.row)">编辑</el-button>
            <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <model ref="modalRef" @ok="select" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import model from "./model.vue"
const formRef = ref(null)
const queryParam = ref({})
const item = ref({})
const data = ref([])

import request from '@/config/axios'
const doSearch = async function () {
  const response = await request.get({
    url: '/answerTemplate/listAll',
  })
  data.value = response
}
async function deleteItem(params) {
  ElMessageBox.alert('删除吗', params.agencyName, {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',

  }).then(res => {
    try {
      request.delete({
        url: "/answerTemplate/deleteById",
        params: { id: params.id }
      }).then(() => {
        doSearch()
      })

    } catch (error) {
      throw error;
    } finally {

    }
  })

}

const modalRef = ref(null)
const addAgency = function () {
  modalRef.value?.add()
}
const bianji = (row) => {
  item.value = row
  modalRef.value?.bianji(row)
}
const select = function () {
  doSearch()
}

onMounted(() => {
  doSearch()
});
</script>

<style scoped lang="scss">
.heard-search {
  margin: 10px 5px 0 10px;

  .el-input {
    --el-input-width: 220px;
  }
}
</style>
